<script setup lang="js">
import { ref, onMounted, reactive } from "vue";
import { getRegionEvaluationId } from "@/apis";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { useUserStore } from "@/store/index";

const discussions = ref([]);
const router = useRouter();
const useStore = useUserStore();
const noDataFlag = ref(true);

onMounted(async () => {
  const rawData = await getRegionEvaluationId(useStore.getUID);

  const data = rawData.data?.eva_list;
  if (data?.length !== 0) {
    noDataFlag.value = false;
  }

  data.forEach((item) => (item.inputComment = "")); // 为每个项目添加评论输入初始化
  discussions.value = data;
});

function handleComment(evaluationID, inputComment) {
  console.log(`Evaluation ID: ${evaluationID}, Comment: ${inputComment}`);

  ElMessage({
    message: "成功提交评论",
    type: "success",
  });
}

/**
 *
 * @param evaluationID {string}
 */
const handleClickGoToResult = (evaluationID) => {
  if (evaluationID) {
    router.push(`/evaluationResult/${evaluationID}`);
  } else {
    router.push("/evaluationResult");
  }
};
</script>

<template>
  <div>
    <h1>辖区评估记录</h1>
    <div v-show="noDataFlag">本辖区没有记录！</div>
    <el-card
      v-for="discussion in discussions"
      :key="discussion.uuid"
      class="box-card"
    >
      <!-- 卡片标题 -->
      <template #header>
        <div
          class="card-header"
          @click="handleClickGoToResult(discussion.uuid)"
        >
          测评ID: {{ discussion.uuid }}
        </div>
      </template>

      <div class="text item">
        <div @click="handleClickGoToResult(discussion.uuid)">
          点击这里查看详情
        </div>
      </div>
      <template #footer>
        <div class="footer-container">
          <el-input
            v-model="discussion.inputComment"
            placeholder="我也说几句..."
            class="input-comment"
          ></el-input>
          <el-button
            type="primary"
            @click="
              handleComment(discussion.evaluationID, discussion.inputComment)
            "
            >提交评论
          </el-button>
        </div>
      </template>
    </el-card>
  </div>
</template>

<style scoped></style>
